<template>
  <div class="all">
    <div class="personalCenter">
      <el-container>
        <el-header>个人中心</el-header>
        <el-container>
          <el-aside width="400px">
            <el-col :span="12">
              <div class="sub-title"></div>
              <div class="demo-basic--circle">
                <div class="img">
                  <el-avatar :size="100"
                    src="https://img2.baidu.com/it/u=1756968792,1852803643&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                    align="center"></el-avatar>
                </div>
                <div class="block">
                  <span>......</span>
                </div>
              </div>
            </el-col>
            <el-input v-model="this.username" type="danger" :disabled="true" placeholder="用户昵称"></el-input>

            <el-input v-model="this.password" :disabled="true" placeholder="密码" show-password></el-input>
            <el-input v-model="input3" type="text" placeholder="生日" show-word-limit></el-input>
            <el-input v-model="input4" type="text" placeholder="爱好" show-word-limit></el-input>
            <el-input v-model="this.email" :disabled="true" placeholder="邮箱">
            </el-input>
            <el-input v-model="input6" type="text" placeholder="手机号码" maxlength="20" show-word-limit></el-input>
            <el-input v-model="input7" type="text" placeholder="固定电话" maxlength="20" show-word-limit></el-input>

            <el-button-group style="float: left; padding: 3px 0" type="text">
              <el-button type="primary" size="medium" round>保存</el-button>
            </el-button-group>
            <el-button-group style="float: right; padding: 3px 0" type="text">
              <el-button type="primary" size="medium" round @click="interview">退出</el-button>
            </el-button-group>
          </el-aside>
          <el-container>
            <el-main>
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <span style="float: left"><b>账号绑定</b></span>
                  <el-button-group style="float: right; padding: 3px 0" type="text">
                    <el-button type="primary" icon="el-icon-edit" size="medium" round>
                      修改信息
                    </el-button>
                    <el-button type="primary" icon="el-icon-check" size="medium" round>
                      确认修改
                    </el-button>
                  </el-button-group>
                </div>
                <div v-for="o in 1" :key="o" class="text item">
                  <h3>账号信息：9956896832</h3>
                  <el-button size="mini" type="danger" @click="changePassword">
                    修改密码
                  </el-button>
                </div>
              </el-card>
              <el-card class="box-card">
                <div>
                  <span style="float: left" shadow="hover"><b>个人说明</b></span>
                  <br />
                  <br />
                  <span>水本无忧，因风起皱</span>
                  <el-divider></el-divider>
                  <span>山本无愁，因雪白头</span>
                  <el-divider></el-divider>
                  <span>漫天的雨落在枫叶的雪花上</span>
                </div>
              </el-card>
            </el-main>
          </el-container>
        </el-container>
      </el-container>
    </div>
  </div>
</template>
<script>
export default {
  name: 'PersonalCenter',
  data() {
    return {
      text: '',
      input1: '',
      input2: '',
      input3: '',
      input4: '',
      input5: '',
      input6: '',
      input7: '',
      username: '',
      password: '',
      email:[],
      baseURL: "http://127.0.0.1:8000/",
      circleUrl:
        'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      sizeList: ['large'],
      tableData: [
        {
          date: '2016-05-03',
          name1: 'Wechat',
          name2: 'Github',
        },
      ],
    }
  },
  created() {
    let userName = JSON.parse(sessionStorage.getItem("user"))
    if (userName) {
      //userName.username==user.username  对应登录界面设置的key里面的value对应的数组值
      this.username = userName.username
      this.password = userName.password
      console.log("this.username:" + this.username)
    }

  },
  mounted() {
    console.log(this.email);
        //加载页面时自动加载数据
        this.find_email();

        //this.getHist();
    },
  methods: {
    changePassword() {
      this.$router.push({
        path: '/Login',
      }
      )
    },
    interview() {
      this.$router.push({
        path: '/Search_user',
      }
      )
    },
    find_email(){
      let that = this
      this.$axios
        .post(that.baseURL+"find_email/", {
          username: that.username
        })
      .then((res)=>{
        if(res.data.code===1){
          that.email = res.data.email
          console.log(that.email);
        } else {
            that.$message.error("后台数据异常");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    
    },

  },
}
</script>
<style>
.all {
  background-image: url('./imag/6.jpg');
  background-size: 100% 100%;
  height: 100%;
  position: fixed;
  width: 100%
}

.el-header {
  line-height: 60px;
  text-align: center;
  background-color: #e01257;
}

.el-aside {
  line-height: 44px;
  text-align: center;
  background-color: #76d6d6;
}

.el-main {
  line-height: 36px;
  text-align: center;
  background-color: #e9eef3;
}

.demo-basic--circle {
  margin-top: 30px;
  margin-left: 150px;
}

.block {
  margin-left: 25px;
  font-weight: bold;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 930px;
  border-radius: 30px;
}
</style>

